<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>旺仔小站</title>
<link type="favicon" rel="shortcut icon" href="/res/icon/small/favicon.ico">
<link rel="stylesheet" href="/static/layui-v2.4.5/layui/css/layui.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/res/common/css/global.css">
<script type="text/javascript" src="/static/jquery/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style type="text/css">
    div.nav-row{
        height: 50px;
        background: rgba(256, 256, 256, 0.5);
        position: fixed;
        bottom: 0px;
        width: 100%;
    }
    div.nav-col{
        height: 100%;
    }
    div.nav-item-div{
        text-align: center;
        width: 100%;
        height: 100%;
        padding: 1px;
    }
    div.nav-icon-box{
        width: 100%;
        height: auto;
    }
    i.nav-icon{
        font-size: 26px;
    }
    iframe.main-content-iframe{
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div class="layui-box">
    <div class="layui-row layui-col-space1 nav-row">
        <div class="layui-col-xs3 nav-col">
            <div class="nav-item-div" id="nav-item-div-home">
                <div class="nav-icon-box">
                    <i class="layui-icon layui-icon-home nav-icon"></i>
                </div>
                首页
            </div>
        </div>
        <div class="layui-col-xs3 nav-col">
            <div class="nav-item-div"  id="nav-item-div-shop">
                <div class="nav-icon-box">
                    <i class="layui-icon layui-icon-cart nav-icon"></i>
                </div>
                商城
            </div>
        </div>
        <div class="layui-col-xs3 nav-col">
            <div class="nav-item-div" id="nav-item-div-discovery">
                <div class="nav-icon-box">
                    <i class="layui-icon layui-icon-search nav-icon"></i>
                </div>
                发现
            </div>
        </div>
        <div class="layui-col-xs3 nav-col">
            <div class="nav-item-div" id="nav-item-div-user">
                <div class="nav-icon-box">
                    <i class="layui-icon layui-icon-user nav-icon"></i>
                </div>
                我的
            </div>
        </div>
    </div>
</div>
<iframe id="main-content-iframe" class="main-content-iframe" src="/page/home/home.html">

</iframe>

<script src="/static/layui-v2.4.5/layui/layui.js"></script>
<script type="text/javascript">
$(function () {
    var layer;
    layui.use('layer', function () {
        layer=layui.layer;
    });
    /*$('div.nav-item-div').on('click', function () {
        layer.tips('抓到了哦', '#'+$(this).attr('id'));
    })*/
    $('#nav-item-div-user').on('click', function () {
        $('#main-content-iframe').attr('src', '/page/user/my.html');
    });
});
</script>

</body>
</html>